<div class="content__title">
    <h1>
        ACL 访问控制 <small>注意观察左边的菜单；ACLService提供一个完整的基于角色的访问控制的服务，若需要支持路由守卫，请配合ACLService与Route Guard配合简便实现。</small>
    </h1>
</div>
<div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="8">
        <nz-card>
            <ng-template #title>全量</ng-template>
            <ng-template #body>
                <button nz-button (click)="toggleFull()">
                    <span>{{ full ? '离开' : '设置'}}权限</span>
                </button>
                <p class="pt-md">全量类指系统管理员角色，无任何受限。</p>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="8">
        <nz-card>
            <ng-template #title>角色[role-a]</ng-template>
            <ng-template #body>
                <button nz-button (click)="toggleRoleA()">
                    <span>{{ roleA.length > 0 ? '离开' : '设置'}}权限</span>
                </button>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="8">
        <nz-card>
            <ng-template #title>角色[role-b]</ng-template>
            <ng-template #body>
                <button nz-button (click)="toggleRoleB()">
                    <span>{{ roleB.length > 0 ? '离开' : '设置'}}权限</span>
                </button>
            </ng-template>
        </nz-card>
    </div>
</div>

